.login-new {
  position: relative;

  max-width: 1024px;
  height: 100%;
  margin: 0 auto;

  transition: padding $default-transition-duration, opacity 350ms ease-out;

  color: white;
  background-color: $bismark;

  &__welcome {
    position: relative;

    box-sizing: border-box;
    height: 100%;
    padding: 36px 70px;

    background-color: rgba(0, 0, 0, .03);
    .logo {
      position: absolute;
      top: 36px;
      left: 70px;
    }
    article {
      text-align: left;
      p {
        font-size: 16px;
        line-height: 24px;

        margin: 0 0 18px;
      }
    }
    footer {
      font-size: 14px;

      position: absolute;
      bottom: 18px;
      left: 0;

      box-sizing: border-box;
      width: 100%;
      padding: 0 70px;

      color: $login-text-color;
      p {
        margin: 8px 0 0;
      }
      a {
        text-decoration: none;

        color: $login-text-color;
        &:hover {
          text-decoration: underline;
        }
      }
    }

    &:before {
      position: absolute;
      top: 0;
      right: 100%;
      bottom: 0;
      left: -5000px;

      display: block;

      content: '';

      background-color: rgba(0, 0, 0, .03);
    }
  }
  &__heading {
    font-size: 26px;
    font-weight: 300;

    display: block;

    width: 100%;
    margin: 0 0 21px;
    strong {
      font-weight: 400;
    }
  }
  &__forms {
    position: relative;

    box-sizing: border-box;
    height: 100%;
    padding: 50px;
    & > div {
      width: 100%;
      & > a {
        font-size: 14px;

        display: inline-block;

        margin-top: 16px;

        cursor: pointer;
        text-decoration: none;

        color: white;
        border-bottom: 1px dotted white;
        &:hover {
          border-bottom: 1px solid white;
        }
      }
    }

    &__form {
      display: none;

      text-align: center;

      footer {
        margin-top: 36px;
      }
      .spinner {
        position: absolute;
        top: 8px;
        right: 10px;
      }

      &--request {
        position: relative;
        .wrong {
          font-size: 14px;

          position: absolute;
          z-index: 1;
          top: 22px;
          right: 0;

          display: none;

          cursor: pointer;

          color: white;
        }
      }
      &--active {
        display: block;
      }
      &--done {
        display: block;

        margin-bottom: 36px;
        .wrong {
          display: block;
        }
        footer {
          display: none;
        }
      }

      .input__material {
        label {
          color: rgba(white, .3);
        }
        input {
          box-shadow: 0 1px 0 0 rgba(white, .15);
        }

        &--focus {
          label {
            color: rgba(white, .8) !important;
          }
        }
      }
    }
  }

  .banner {
    &:before,
    &:after {
      position: absolute;
      z-index: 1000;
      top: 0;

      height: $banner-height;

      content: '';

      background-color: $havelock-blue;
    }

    &:before {
      left: -100%;

      width: 100%;
    }
    &:after {
      right: -100%;

      width: 100%;
    }
  }

  &--reversed {
    .logo {
      position: absolute;
      top: 36px;
      left: 36px;
    }
    .login-new__welcome {
      background-color: transparent;
      &:before {
        display: none;
      }
    }
    .login-new__form {
      background-color: rgba(0, 0, 0, .03);
      &:before {
        position: absolute;
        top: 0;
        right: 100%;
        bottom: 0;
        left: -5000px;

        display: block;

        content: '';

        background-color: rgba(0, 0, 0, .03);
      }
    }
  }
}

.login {
  width: 100%;
  height: 100%;

  &__header {
    font-weight: 700;
    line-height: 32px;

    position: fixed;
    top: 0;
    left: 0;

    display: block;

    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 14px 16px;

    text-align: left;

    color: white;
    background-color: $body-base-color;
    box-shadow: inset 0 -3px 5px -2px rgba(0, 0, 0, .2);
    &__logo {
      float: left;

      margin-right: 8px;
    }
  }
  &__window {
    box-sizing: border-box;
    width: 360px;
    padding: 16px;

    transition: height $default-transition-duration $default-transition-timing;
    text-align: initial;

    color: $toolbar-text-color;
    border: 1px solid darken($body-background-color, 2);
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 3px 7px -5px rgba(0, 0, 0, .4);

    h2 {
      line-height: 32px;

      margin-top: 8px;

      text-align: center;
    }
    p {
      color: rgba($toolbar-text-color, .7);
    }
    a {
      font-size: 14px;
      font-weight: 700;

      display: inline-block;

      margin-top: 8px;

      text-decoration: none;

      color: $body-base-color;
    }
    input {
      font-size: 14px;
      line-height: 22px;

      box-sizing: border-box;
      width: 100%;
      margin-bottom: 16px;
      padding: 6px 8px;

      transition: border $default-transition-duration $default-transition-timing;

      border: 1px solid $compose-border-color;
      border-radius: $button-border-radius;
      //box-shadow: 0 3px 6px -3px rgba(0,0,0, .2);
      outline: none;
      &:hover {
        border-color: rgba(lighten($body-base-color, 10), .5);
      }
      &:focus,
      &:active {
        //box-shadow: 0 0 0 rgba(0,0,0,0);
        border-color: rgba(lighten($body-base-color, 10), .9);
      }
    }
    input[disabled] {
      cursor: not-allowed;

      opacity: .7;
    }
  }
}
